<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!-- 分类数据 -->
      <el-col :span="4" :xs="24">
        <div class="head-container">
          <el-input
            v-model="sortName"
            placeholder="输入关键字进行过滤"
            clearable
            style="width: 150px; margin-right: 10px"
          />

          <el-button
            type="primary"
            icon="el-icon-plus"
            circle
            @click="handleAddSort"
            v-hasPermi="['products:sort:add']"
          >
          </el-button>
        </div>
        <div class="head-container">
          <el-tree
            class="filter-tree"
            :data="sortOptions"
            :props="defaultProps"
            :default-expand-all="false"
            :expand-on-click-node="true"
            :filter-node-method="filterNode"
            accordion
            ref="tree"
            node-key="sortId"
            highlight-current
            @node-click="handleNodeClick"
          >
          </el-tree>
        </div>
      </el-col>
      <!-- 商品数据 -->
      <el-col :span="20" :xs="24">
        <el-form
          :model="queryParams"
          ref="queryForm"
          :inline="true"
          label-width="68px"
        >
          <el-form-item label="" prop="productName">
            <el-input
              v-model="queryParams.productName"
              placeholder="请输入商品名称进行查询"
              clearable
              style="width: 240px"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item prop="shelfStatus">
            <el-select
              v-model="queryParams.shelfStatus"
              placeholder="上架状态"
              clearable
              style="width: 240px"
            >
              <el-option
                v-for="dict in dict.type.shelf_status"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="small" @click="handleQuery"
              >查询</el-button
            >
            <el-button
              type="success"
              size="small"
              @click="handleAdd"
              v-hasPermi="['products:product:add']"
              >商品添加</el-button
            >
          </el-form-item>
        </el-form>

        <el-table v-loading="loading" :data="productList">
          <el-table-column prop="mainImgId" label="商品主图" align="center">
            <template slot-scope="scope">
              <img :src="scope.row.mainImgId" width="70" height="70" />
            </template>
          </el-table-column>

          <el-table-column prop="detailImgId" label="商品详情图" align="center">
            <template slot-scope="scope">
              <img :src="scope.row.detailImgId" width="70" height="70" />
            </template>
          </el-table-column>

          <el-table-column
            label="商品名称"
            align="center"
            prop="productName"
            :show-overflow-tooltip="true"
          />

          <el-table-column
            label="商品原价（元）"
            align="center"
            prop="costOfGoods"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="商品现价（元）"
            align="center"
            prop="currentCommodityPrice"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="vip价格 (元) "
            align="center"
            prop="vipPrice"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="库存数量"
            align="center"
            prop="inventoryQuantity"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="商品描述"
            align="center"
            prop="productDescription"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="创建时间"
            align="center"
            prop="createTime"
            width="160"
          >
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="修改时间"
            align="center"
            prop="updateTime"
            width="160"
          >
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.updateTime) }}</span>
            </template>
          </el-table-column>

          <el-table-column
            fixed="right"
            label="操作"
            align="center"
            width="150"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleUpdate(scope.row)"
                v-hasPermi="['products:product:edit']"
                >修改</el-button
              >
              <!-- <el-button
                type="success"
                size="small"
                @click="handleUpdate(scope.row)"
                v-hasPermi="['products:product:edit']"
                style="margin-right: 10px"
                >编辑</el-button
              > -->
              <span style="margin-left: 10px; color: red">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-turn-off"
                  @click="handleUnshelve(scope.row)"
                  v-hasPermi="['products:product:down']"
                  v-if="scope.row.shelfStatus == 1"
                  style="color: red"
                  >下架</el-button
                >
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-open"
                  @click="handleUnshelve(scope.row)"
                  v-hasPermi="['products:product:down']"
                  v-else
                  style="color: #13ce66"
                  >上架</el-button
                >
              </span>
              <el-dropdown
                size="mini"
                @command="(command) => handleCommand(command, scope.row)"
                v-hasPermi="['products:product:edit']"
              >
                <el-button size="mini" type="text" icon="el-icon-d-arrow-right"
                  >更多</el-button
                >
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item
                    command="handlePreviewImg"
                    icon="el-icon-view"
                    >预览图片</el-dropdown-item
                  >
                  <el-dropdown-item
                    command="handleUpdatePrice"
                    icon="el-icon-edit-outline"
                    v-hasPermi="['products:product:edit']"
                    >修改价格</el-dropdown-item
                  >
                  <el-dropdown-item
                    command="handleAddQuantity"
                    icon="el-icon-circle-plus-outline"
                    v-hasPermi="['products:product:edit']"
                    >添加库存</el-dropdown-item
                  >
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </el-col>
    </el-row>

    <!-- 添加商品对话框 -->
    <el-dialog
      title="添加商品"
      :visible.sync="open"
      :modal="false"
      :close-on-click-modal="false"
      :show-close="false"
      width="600px"
      append-to-body
      style="position: absolute; padding-right: 410px"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="商品主图" prop="mainImgIds">
              <el-upload
                :class="{ uoloadSty: showBtnDealImg, disUoloadSty: noneBtnImg }"
                ref="upload"
                action="#"
                multiple
                :limit="mainImgLimit"
                :file-list="mainImgIds"
                list-type="picture-card"
                :on-preview="handleMainImgPreview"
                :on-change="OnChangeMainImg"
                :on-remove="handleRemoveMainImg"
                :on-exceed="handleExceedMainImg"
                :auto-upload="false"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="mainDialogVisible" append-to-body>
                <img width="100%" :src="mainImageUrl" alt="" />
              </el-dialog>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="商品导航图">
              <el-upload
                ref="upload"
                :class="{
                  uoloadSty: showBannerBtnDealImg,
                  disUoloadSty: noneBannerBtnImg,
                }"
                action="#"
                multiple
                :limit="bannerImgLimit"
                :file-list="bannerImg"
                list-type="picture-card"
                :on-preview="handleBannerImgPreview"
                :on-change="OnChangeBannerImg"
                :on-remove="handleRemoveBannerImg"
                :on-exceed="handleExceedBannerImg"
                :auto-upload="false"
              >
                <i class="el-icon-plus"></i>
              </el-upload>

              <el-dialog :visible.sync="bannerDialogVisible" append-to-body>
                <img width="100%" :src="bannerImageUrl" alt="" />
              </el-dialog>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="商品详情图">
              <el-upload
                :class="{ uoloadSty: showImg, disUoloadSty: noneBtn }"
                ref="upload"
                action="#"
                multiple
                :limit="limit"
                :file-list="detailImgIds"
                list-type="picture-card"
                :on-preview="handlePreview"
                :on-change="OnChange"
                :on-remove="handleRemove"
                :on-exceed="handleExceed"
                :auto-upload="false"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible" append-to-body>
                <img width="100%" :src="detailImageUrl" alt="" />
              </el-dialog>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="商品名称" prop="productName">
              <el-input v-model="form.productName" style="width: 420px" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="商品原价" prop="costOfGoods">
              <el-input-number
                style="text-align: center"
                v-model="form.costOfGoods"
                controls-position="right"
                :min="0"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="商品现价" prop="currentCommodityPrice">
              <el-input-number
                v-model="form.currentCommodityPrice"
                controls-position="right"
                :min="0"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="库存数量" prop="inventoryQuantity">
              <el-input-number
                v-model="form.inventoryQuantity"
                controls-position="right"
                :min="0"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="商品类型" prop="sortId">
              <treeselect
                :normalizer="normalizer"
                :disable-branch-nodes="true"
                v-model="form.sortId"
                :options="sortOptions"
                :show-count="true"
                placeholder="请选择"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="商品介绍" prop="productDescription">
              <el-input
                v-model="form.productDescription"
                type="textarea"
                placeholder="请输入不少于10个字的描述"
                maxlength="100"
                show-word-limit
                style="width: 420px"
                class="textarea-box"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 修改商品对话框 -->
    <el-dialog
      title="修改商品"
      :visible.sync="openUpdate"
      width="600px"
      append-to-body
      :modal="false"
      :close-on-click-modal="false"
      :show-close="false"
      style="position: absolute; padding-right: 410px"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="商品主图" prop="mainImgIds">
              <el-upload
                :class="{ uoloadSty: showBtnDealImg, disUoloadSty: noneBtnImg }"
                ref="upload"
                action="#"
                multiple
                :limit="mainImgLimit"
                :file-list="mainImgIds"
                list-type="picture-card"
                :on-preview="handleMainImgPreview"
                :on-change="OnChangeMainImg"
                :on-remove="handleRemoveMainImg"
                :on-exceed="handleExceedMainImg"
                :auto-upload="false"
              >
                <i class="el-icon-plus"></i>
              </el-upload>

              <el-dialog :visible.sync="mainDialogVisible" append-to-body>
                <img width="100%" :src="mainImageUrl" alt="" />
              </el-dialog>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="商品导航图">
              <el-upload
                ref="upload"
                :class="{
                  uoloadSty: showBannerBtnDealImg,
                  disUoloadSty: noneBannerBtnImg,
                }"
                action="#"
                multiple
                :limit="bannerImgLimit"
                :file-list="bannerImg"
                list-type="picture-card"
                :on-preview="handleBannerImgPreview"
                :on-change="OnChangeBannerImg"
                :on-remove="handleRemoveBannerImg"
                :on-exceed="handleExceedBannerImg"
                :auto-upload="false"
              >
                <i class="el-icon-plus"></i>
              </el-upload>

              <el-dialog :visible.sync="bannerDialogVisible" append-to-body>
                <img width="100%" :src="bannerImageUrl" alt="" />
              </el-dialog>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="商品详情图">
              <el-upload
                :class="{ uoloadSty: showImg, disUoloadSty: noneBtn }"
                ref="upload"
                action="#"
                multiple
                :limit="limit"
                :file-list="detailImgIds"
                list-type="picture-card"
                :on-preview="handlePreview"
                :on-change="OnChange"
                :on-remove="handleRemove"
                :on-exceed="handleExceed"
                :auto-upload="false"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible" append-to-body>
                <img width="100%" :src="detailImageUrl" alt="" />
              </el-dialog>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="商品id" prop="productId" hidden>
              <el-input v-model="form.productId" maxlength="30" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="商品类型" prop="sortId">
              <treeselect
                :normalizer="normalizer"
                :disable-branch-nodes="true"
                v-model="form.sortId"
                :options="sortOptions"
                :show-count="true"
                placeholder="请选择"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="商品名称" prop="productName">
              <el-input v-model="form.productName" style="width: 420px" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="商品介绍" prop="productDescription">
              <el-input
                v-model="form.productDescription"
                type="textarea"
                placeholder="请输入不少于10个字的描述"
                maxlength="100"
                show-word-limit
                style="width: 420px"
                class="textarea-box"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 空白预览框 -->
    <el-dialog
      title="图片排版"
      :visible.sync="layout"
      width="600px"
      append-to-body
      :modal="false"
      :close-on-click-modal="false"
      :show-close="false"
      style="
        position: absolute;
        left: 920px;
        width: 650px;
        height: 800px;
        overflow-y: hidden;
      "
    >
      <el-form
        ref="form"
        :model="form"
        label-width="100px"
        style="height: 680px"
      >
        <el-row>
          <el-col :span="25">
            <el-form-item style="margin-left: -70px">
              <div class="container222">
                <div class="name">商品名称</div>
                <div class="desc">商品介绍</div>
                <div class="firstLine">
                  <div class="mainImg1">
                    <el-image style="width: 200px; height: 168px" fit="fill">
                      <div slot="error" class="image-slot">主图1</div>
                    </el-image>
                  </div>
                  <div class="detailImg">
                    <div
                      class="detailImg1"
                      v-for="(item, index) in [1, 2, 3, 4]"
                      :key="index"
                    >
                      <el-image style="width: 105px; height: 78px" fit="fill">
                        <div slot="error" class="image-slot">
                          详情图{{ item }}
                        </div>
                      </el-image>
                    </div>
                  </div>
                </div>
                <div class="secondLine">
                  <div class="bannerImg">
                    <el-image style="width: 455px; height: 200px">
                      <div slot="error" class="image-slot1">导航图</div>
                    </el-image>
                  </div>
                </div>
                <div class="thirdLine">
                  <div class="mainImg2">
                    <el-image style="width: 220px; height: 170px">
                      <div slot="error" class="image-slot2">主图2</div>
                    </el-image>
                  </div>
                  <div class="mainImg3">
                    <el-image style="width: 220px; height: 170px">
                      <div slot="error" class="image-slot2">主图3</div>
                    </el-image>
                  </div>
                </div>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">关闭</el-button>
      </div> -->
    </el-dialog>

    <!-- 预览图片对话框 -->
    <el-dialog
      title="预览图片"
      :visible.sync="preview"
      width="750px"
      height="900px"
      append-to-body
      :close-on-click-modal="false"
      :show-close="true"
    >
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="100px"
        style="height: 700px"
      >
        <el-row>
          <el-col :span="25">
            <el-form-item label="预览效果：">
              <div class="container333" :style="{ height: formHeight }">
                <div class="name">{{ form.productName }}</div>
                <div class="desc">{{ form.productDescription }}</div>
                <div class="firstLine">
                  <div class="mainImg1">
                    <el-image
                      style="width: 200px; height: 168px"
                      :src="imgPrefixL + `${mainImgList[0]}`"
                      fit="fill"
                    ></el-image>
                  </div>
                  <div class="detailImg">
                    <div
                      class="detailImg1"
                      v-for="(item, index) in detailImgList"
                      :key="index"
                    >
                      <el-image
                        style="width: 105px; height: 78px"
                        :src="imgPrefixL + `${item}`"
                        fit="fill"
                      ></el-image>
                    </div>
                  </div>
                </div>
                <div class="secondLine" v-if="this.bannerImgList != null">
                  <div class="bannerImg">
                    <el-image
                      style="width: 455px; height: 200px"
                      :src="imgPrefixL + `${bannerImgList}`"
                      fit="fill"
                    ></el-image>
                  </div>
                </div>
                <div class="thirdLine" v-if="this.mainImgList[1] != null">
                  <div class="mainImg2">
                    <el-image
                      style="width: 220px; height: 170px"
                      :src="imgPrefixL + `${mainImgList[1]}`"
                      fit="fill"
                    >
                    </el-image>
                  </div>
                  <div class="mainImg3" v-if="this.mainImgList[2] != null">
                    <el-image
                      style="width: 220px; height: 170px"
                      :src="imgPrefixL + `${mainImgList[2]}`"
                      fit="fill"
                    >
                    </el-image>
                  </div>
                </div>
              </div>
            </el-form-item>
            <span style="color: blue; margin-left: 100px"
              >温馨提示：如需修改，请前往修改页面</span
            >
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">关闭</el-button>
      </div>
    </el-dialog>

    <!-- 修改商品价格对话框 -->
    <el-dialog
      title="修改商品价格"
      :visible.sync="update"
      width="600px"
      append-to-body
      :close-on-click-modal="false"
      :show-close="false"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="商品id" prop="productId" hidden>
              <el-input v-model="form.productId" maxlength="30" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="商品原价" prop="costOfGoods">
              <el-input-number
                style="text-align: center"
                v-model="form.costOfGoods"
                controls-position="right"
                :min="0"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="商品现价" prop="currentCommodityPrice">
              <el-input-number
                v-model="form.currentCommodityPrice"
                controls-position="right"
                :min="0"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="优惠价格">
              <el-input-number
                v-model="form.vipPrice"
                controls-position="right"
                :min="0"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 修改商品库存数量对话框 -->
    <el-dialog
      title="添加库存"
      :visible.sync="updateQuantity"
      width="600px"
      append-to-body
      :close-on-click-modal="false"
      :show-close="false"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="商品id" prop="productId" hidden>
              <el-input v-model="form.productId" maxlength="30" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="库存数量" prop="inventoryQuantity">
              <el-input-number
                v-model="form.inventoryQuantity"
                controls-position="right"
                :min="0"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 新增分类对话框 -->
    <el-dialog
      title="添加分类"
      :visible.sync="flag"
      width="600px"
      append-to-body
      :close-on-click-modal="false"
      :show-close="false"
    >
      <el-form
        ref="sortForm"
        :model="sortForm"
        :rules="sortRules"
        label-width="100px"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="父级" label-width="100px">
              <treeselect
                v-model="sortForm.parentId"
                :normalizer="normalizer"
                :options="sortOptions"
                :show-count="true"
                @select="selectSort"
                placeholder="请选择"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="类型名称" label-width="100px" prop="sortName">
          <el-input v-model="sortForm.sortName" autocomplete="off"></el-input>
        </el-form-item>
        <!-- <el-form-item label="分类类型">
          <el-select v-model="sortForm.sortType" placeholder="请选择" @change="selectChange">
            <el-option value="Y" label="一级分类"></el-option>
            <el-option value="E" label="二级分类"></el-option>
            <el-option value="S" label="三级分类"></el-option>
          </el-select>
          <el-select v-model="sortForm.parentId" placeholder="请选择"
            v-if="sortForm.sortType == 'S' || sortForm.sortType == 'E'">
            <el-option v-for="item in sorts" :key="item.sortId" :label="item.sortLevel" :value="item.sortId">
            </el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="显示排序">
          <el-input-number
            v-model="sortForm.orderNum"
            controls-position="right"
            :min="0"
          />
        </el-form-item>
        <el-row>
          <el-col
            :span="12"
            v-show="sortForm.parentType != 1 && sortForm.parentId != null"
          >
            <el-form-item label="分类图片">
              <el-upload
                ref="upload"
                :class="{
                  uoloadSty: showSortBtnDealImg,
                  disUoloadSty: noneSortBtnImg,
                }"
                action="#"
                multiple
                :limit="sortImgLimit"
                :file-list="sortImg"
                list-type="picture-card"
                :on-preview="handleSortImgPreview"
                :on-change="OnChangeSortImg"
                :on-remove="handleRemoveSortImg"
                :on-exceed="handleExceedSortImg"
                :auto-upload="false"
              >
                <i class="el-icon-plus"></i>
              </el-upload>

              <el-dialog :visible.sync="sortDialogVisible" append-to-body>
                <img width="100%" :src="sortImageUrl" alt="" />
              </el-dialog>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item
          label="图标"
          prop="icon"
          v-if="sortForm.parentType == 1 && sortForm.parentId != null"
        >
          <el-upload
            ref="upload"
            :class="{
              uoloadSty: showIconBtnDealImg,
              disUoloadSty: noneIconBtnImg,
            }"
            action="#"
            multiple
            :limit="iconImgLimit"
            :file-list="iconImg"
            list-type="picture-card"
            :on-preview="handleIconImgPreview"
            :on-change="OnChangeIconImg"
            :on-remove="handleRemoveIconImg"
            :on-exceed="handleExceedIconImg"
            :auto-upload="false"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="iconDialogVisible" append-to-body>
            <img width="100%" :src="iconImageUrl" alt="" />
          </el-dialog>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitSortForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listProduct,
  getProductById,
  addProduct,
  editProduct,
  downProduct,
  treeSort,
  addSort,
  uploadProductImg,
  firstSort,
  secondSort,
  getSortById,
} from "@/api/products/product";
import IconSelect from "@/components/IconSelect";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  name: "Product",
  dicts: ["shelf_status"],
  components: { Treeselect, IconSelect },
  data() {
    return {
      normalizer(node) {
        //去掉children=[]的children属性 respectively
        if (node.children && !node.children.length) {
          delete node.children;
        }
      },
      //新增成功后返回的商品id
      id: "",
      // 遮罩层
      loading: true,
      // 商品表格数据
      productList: undefined,
      // 总条数
      total: 0,
      //是否显示新增分类弹出层
      flag: false,
      //分类弹出层表单参数
      sortForm: {
        sortImgId: "",
        icon: "",
      },
      sortImg: [],
      sortImgLimit: 1,
      sortImageUrl: [], //分类图片路径
      sortDialogVisible: false, //放大预览图片时是否显示弹出层
      showSortBtnDealImg: true,
      noneSortBtnImg: false, //是否隐藏分类上传图片的加号
      //图标
      iconImg: [],
      iconImgLimit: 1,
      iconImageUrl: [], //图标路径
      iconDialogVisible: false, //放大预览图片时是否显示弹出层
      showIconBtnDealImg: true,
      noneIconBtnImg: false, //是否隐藏图标上传的加号
      //分类树
      sortOptions: undefined,
      sorts: undefined, //分类列表
      defaultProps: {
        children: "children",
        label: "label",
      },
      //分类名称
      sortName: undefined,
      //模糊查询数据
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        productName: undefined,
        shelfStatus: undefined,
        sortId: undefined,
      },
      //商品主图
      mainImgIds: [], //绑定商品主图的图片数组
      mainImgLimit: 9,
      showBtnDealImg: true,
      noneBtnImg: false, //是否隐藏主图上传图片的加号
      mainImageUrl: [], //主图图片路径
      mainDialogVisible: false, //放大预览图片时是否显示弹出层
      //商品导航图
      imgPrefixL: process.env.VUE_APP_IMG_BASE_URL,
      bannerImg: [],
      bannerImgLimit: 1,
      bannerImageUrl: [], //分类图片路径
      bannerDialogVisible: false, //放大预览图片时是否显示弹出层
      showBannerBtnDealImg: true,
      noneBannerBtnImg: false, //是否隐藏分类上传图片的加号
      //商品详情图
      detailImgIds: [], //绑定商品详情图的图片数组
      limit: 4,
      showImg: true,
      noneBtn: false, //是否隐藏详情图上传图片的加号
      detailImageUrl: [],
      dialogVisible: false, //放大预览图片时是否显示弹出层
      deleteImgFileList: [], //存已被删除了的图片的id

      //预览图片的数据
      mainImgList: [],
      bannerImgList: "",
      detailImgList: [],

      //是否显示图片排版的弹出层
      layout: false,
      //是否显示预览图片的弹出层
      preview: false,
      //是否显示修改价格的弹出层
      update: false,
      //是否显示添加库存的弹出层
      updateQuantity: false,
      // 是否显示商品修改的弹出层
      openUpdate: false,
      // 是否显示商品新增的弹出层
      open: false,
      // 商品弹出层表单参数
      form: {
        mainImgId: "",
        bannerImgId: "",
        detailImgId: "",
      },
      // 表单校验
      rules: {
        productName: [
          { required: true, message: "商品名称不能为空", trigger: "blur" },
        ],
        costOfGoods: [
          { required: true, message: "商品原价不能为空", trigger: "blur" },
        ],
        currentCommodityPrice: [
          { required: true, message: "商品现价不能为空", trigger: "blur" },
        ],
        inventoryQuantity: [
          { required: true, message: "库存数量不能为空", trigger: "blur" },
        ],
        sortId: [
          { required: true, message: "商品类型不能为空", trigger: "change" },
        ],
        productDescription: [
          { required: true, message: "商品介绍不能为空", trigger: "blur" },
          {
            min: 10,
            max: 100,
            message: "长度在 10 到 100 个字符",
            trigger: "blur",
          },
        ],
      },
      sortRules: {
        sortName: [
          { required: true, message: "分类名称不能为空", trigger: "blur" },
        ],
      },
    };
  },
  computed: {
    formHeight() {
      if (this.bannerImgList && this.mainImgList[1]) {
        return "700px"; // 设置一个固定的高度
      } else if (this.bannerImgList == null && this.mainImgList[1]) {
        return "485px";
      } else if (this.bannerImgList && this.mainImgList[1] == null) {
        return "485px";
      } else if (this.bannerImgList == null && this.mainImgList[1] == null) {
        return "263px";
      }
    },
  },

  watch: {
    // 根据名称筛选分类树
    sortName(val) {
      this.$refs.tree.filter(val);
    },
  },

  created() {
    this.getList();
    this.getSortTree();
  },

  methods: {
    // 选择图标
    // selected(name) {
    //   this.sortForm.icon = name;
    // },
    /** 查询商品列表 */
    getList() {
      this.loading = true;
      listProduct(this.queryParams).then((response) => {
        this.productList = response.data.content;

        this.productList.forEach((item) => {
          if (
            item.mainImgId != undefined &&
            item.mainImgId != "" &&
            item.mainImgId != null
          ) {
            if (item.mainImgId.length > 4) {
              let arr = item.mainImgId.split(",");
              item.mainImgId =
                process.env.VUE_APP_IMG_BASE_URL + parseInt(arr[0]);
            } else {
              item.mainImgId =
                process.env.VUE_APP_IMG_BASE_URL + parseInt(item.mainImgId);
            }
          }

          if (
            item.detailImgId != undefined &&
            item.detailImgId != "" &&
            item.detailImgId != null
          ) {
            if (item.detailImgId.length > 4) {
              let arr = item.detailImgId.split(",");
              item.detailImgId =
                process.env.VUE_APP_IMG_BASE_URL + parseInt(arr[0]);
            } else {
              item.detailImgId =
                process.env.VUE_APP_IMG_BASE_URL + parseInt(item.detailImgId);
            }
          }
        });
        this.total = response.data.totalSize;
        this.loading = false;
      });
    },
    /** 查询分类下拉树结构 */
    getSortTree() {
      treeSort().then((response) => {
        this.sortOptions = response.data;
        // 调用函数来添加额外的属性
        this.addExtraProperties(this.sortOptions);
      });
    },
    addExtraProperties(data) {
      // 遍历树形数据
      data.forEach((node) => {
        getSortById(node.id).then((res) => {
          // 给每个节点添加额外的属性
          node.sortType = res.data.sortType;
        });

        // 如果该节点具有子节点，则递归调用该函数
        if (node.children && node.children.length > 0) {
          this.addExtraProperties(node.children);
        }
      });
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 节点单击事件
    handleNodeClick(data) {
      // 节点单击事件 data为选中节点数据
      // data.children == null则为叶子节点
      if (data.children == null) {
        // 将id赋值给查询对象的classId
        this.queryParams.sortId = data.id;
        // 查询请求
        this.handleQuery();
      } else {
        //只执行展开/收缩
        return;
      }
    },
    //选中分类选项，触发事件
    selectSort(node) {
      if (node) {
        this.sortForm.parentType = node.sortType;
      } else {
        this.sortForm.parentType == 0;
      }
    },
    /** 新增分类按钮 */
    handleAddSort() {
      this.sortForm = {};
      this.sortImg = [];
      this.iconImg = [];
      this.noneSortBtnImg = false; //是否隐藏分类上传图片的加号
      this.noneIconBtnImg = false;
      this.flag = true;
    },
    // 取消按钮
    cancel() {
      this.mainImgIds = [];
      this.detailImgIds = [];
      this.bannerImg = [];
      this.sortImg = [];
      this.iconImg = [];
      this.noneBtnImg = false;
      this.noneBtn = false;
      this.noneBannerBtnImg = false;
      this.open = false;
      this.openUpdate = false;
      this.updateQuantity = false;
      this.update = false;
      this.flag = false;
      this.preview = false;
      this.layout = false;
      // this.sortForm = {};
      // location.reload();
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        producId: undefined,
        productName: undefined,
        costOfGoods: undefined,
        currentCommodityPrice: undefined,
        vipPrice: undefined,
        inventoryQuantity: undefined,
        sex: undefined,
        sortId: undefined,
        productDescription: undefined,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList();
    },
    /** 新增商品按钮操作 */
    handleAdd() {
      this.noneBtnImg = false;
      this.noneBtn = false;
      this.noneBannerBtnImg = false;
      this.form = {};
      this.mainImgIds = [];
      this.detailImgIds = [];
      this.bannerImg = [];
      this.open = true;
      this.layout = true;
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.mainImgIds = [];
      this.detailImgIds = [];
      this.bannerImg = [];
      this.form = {};
      // this.reset();
      getProductById(row.productId).then((response) => {
        this.form = response.data.productVo;
        if (
          this.form.mainImgId != undefined &&
          this.form.mainImgId != "" &&
          this.form.mainImgId != null
        ) {
          if (this.form.mainImgId.length > 4) {
            let arr = this.form.mainImgId.split(",");
            for (let i = 0; i < arr.length; i++) {
              this.mainImgIds.push({
                name: arr[i],
                url: process.env.VUE_APP_IMG_BASE_URL + parseInt(arr[i]),
              });
            }
          } else {
            this.mainImgIds.push({
              name: this.form.mainImgId,
              url:
                process.env.VUE_APP_IMG_BASE_URL +
                parseInt(this.form.mainImgId),
            });
          }
          if (this.mainImgIds.length >= 9) {
            this.noneBtnImg = true;
          }
        }
        if (
          this.form.bannerImgId != undefined &&
          this.form.bannerImgId != "" &&
          this.form.bannerImgId != null
        ) {
          this.bannerImg.push({
            name: this.form.bannerImgId,
            url:
              process.env.VUE_APP_IMG_BASE_URL +
              parseInt(this.form.bannerImgId),
          });
        }
        if (this.bannerImg.length >= 1) {
          this.noneBannerBtnImg = true;
        }

        if (
          this.form.detailImgId != undefined &&
          this.form.detailImgId != "" &&
          this.form.detailImgId != null
        ) {
          if (this.form.detailImgId.length > 4) {
            let arr = [];
            arr = this.form.detailImgId.split(",");
            for (let i = 0; i < arr.length; i++) {
              this.detailImgIds.push({
                name: arr[i],
                url: process.env.VUE_APP_IMG_BASE_URL + parseInt(arr[i]),
              });
            }
          } else {
            this.detailImgIds.push({
              name: this.form.detailImgId,
              url:
                process.env.VUE_APP_IMG_BASE_URL +
                parseInt(this.form.detailImgId),
            });
          }
          if (this.detailImgIds.length == 4) {
            this.noneBtn = true;
          }
        }
        this.layout = true;
        this.openUpdate = true;
      });
    },
    /** 提交按钮 */
    submitForm: function () {
      if (
        this.mainImgIds != null &&
        this.mainImgIds != "" &&
        this.mainImgIds != undefined &&
        this.mainImgIds.length > 0
      ) {
        var arr = [];
        this.mainImgIds.forEach((item) => {
          arr.push(item.name);
          this.form.mainImgId = arr.join(",");
        });
      }
      if (
        this.bannerImg != null &&
        this.bannerImg != "" &&
        this.bannerImg != undefined
      ) {
        var arr = [];
        this.bannerImg.forEach((item) => {
          arr.push(item.name);
          this.form.bannerImgId = arr.join(",");
        });
      }
      if (
        this.detailImgIds != null &&
        this.detailImgIds != "" &&
        this.detailImgIds != undefined &&
        this.detailImgIds.length == 4
      ) {
        var arr = [];
        this.detailImgIds.forEach((item) => {
          arr.push(item.name);
          this.form.detailImgId = arr.join(",");
        });
      }
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.productId != undefined) {
            editProduct(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.mainImgIds = [];
              this.detailImgIds = [];
              this.noneBtnImg = false;
              this.noneBtn = false;
              this.openUpdate = false;
              this.layout = false;
              this.update = false;
              this.updateQuantity = false;
              this.form = {};
              this.getList();
            });
          } else {
            let that = this;
            addProduct(this.form)
              .then((response) => {
                this.open = false;
                this.layout = false;
                this.form = {};
                this.mainImgIds = [];
                this.detailImgIds = [];
                this.noneBtnImg = false;
                this.noneBtn = false;
                if (response.code == 200) {
                  const productId = response.data.data;
                  this.$modal
                    .confirm("新增成功，是否前往预览页，查看图片展示效果？")
                    .then(function () {
                      that.handlePreviewImg(productId);
                    });
                }
                this.getList();
              })
              .catch((error) => {
                this.$modal.msgError(error); // 或者将处理后的错误信息显示给用户
              });
          }
        }
      });
    },

    /**更多操作触发 */
    handleCommand(command, row) {
      switch (command) {
        case "handlePreviewImg":
          this.handlePreviewImg(row.productId);
          break;
        case "handleUpdatePrice":
          this.handleUpdatePrice(row);
          break;
        case "handleAddQuantity":
          this.handleAddQuantity(row);
          break;
        default:
          break;
      }
    },
    /** 预览图片操作 */
    handlePreviewImg(productId) {
      getProductById(productId).then((res) => {
        //主图集合
        let mainImgIds = res.data.productVo.mainImgId;
        this.mainImgList = mainImgIds.split(",");
        //导航图
        this.bannerImgList = res.data.productVo.bannerImgId;
        //详情图集合
        let detailImgIds = res.data.productVo.detailImgId;
        this.detailImgList = detailImgIds.split(",");
        this.form = res.data.productVo;

        this.preview = true;
      });
    },
    /** 修改价格操作 */
    handleUpdatePrice(row) {
      this.reset();
      getProductById(row.productId).then((response) => {
        this.form = response.data.productVo;
        this.update = true;
      });
    },
    /** 添加库存操作 */
    handleAddQuantity(row) {
      this.reset();
      getProductById(row.productId).then((response) => {
        this.form = response.data.productVo;
        this.updateQuantity = true;
      });
    },

    /** 分类类型改变触发事件 */
    selectChange(item) {
      this.$set(this.sortForm, "parentId", "");
      this.sorts = [];
      //选择二级分类（E）时，父级显示一级分类列表
      if (item == "E") {
        firstSort().then((res) => {
          this.sorts = res.data;
        });
      }
      //选择三级分类（S）时，父级显示二级分类列表
      if (item == "S") {
        secondSort().then((res) => {
          this.sorts = res.data;
        });
      }
    },
    /** 新增分类提交按钮 */
    submitSortForm: function () {
      if (
        this.sortImg != null &&
        this.sortImg != "" &&
        this.sortImg != undefined
      ) {
        var arr = [];
        this.sortImg.forEach((item) => {
          arr.push(item.name);
          this.sortForm.sortImgId = arr.join(",");
        });
      }
      if (
        this.iconImg != null &&
        this.iconImg != "" &&
        this.iconImg != undefined
      ) {
        var arr = [];
        this.iconImg.forEach((item) => {
          arr.push(item.name);
          this.sortForm.icon = arr.join(",");
        });
      }
      if (this.sortForm.parentId != null) {
        this.sortForm.sortType = this.sortForm.parentType + 1;
      }
      this.$refs["sortForm"].validate((valid) => {
        if (valid) {
          addSort(this.sortForm).then((response) => {
            this.$modal.msgSuccess("新增成功");
            this.flag = false;
            // this.sortImg = [];
            // this.sortForm = {};
            this.getSortTree();
            location.reload();
          });
        }
      });
    },
    /** 上架/下架按钮操作 */
    handleUnshelve(row) {
      let text = row.shelfStatus === "0" ? "上架" : "下架";
      let status = row.shelfStatus === "0" ? "1" : "0";
      this.$modal
        .confirm("是否确认" + text + "该商品？")
        .then(function () {
          return downProduct(row.productId, status);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess(text + "成功");
        })
        .catch(() => {});
    },

    /**
     * 商品主图
     */
    //预览图片时
    handleMainImgPreview(file) {
      this.mainImageUrl = file.url;
      this.mainDialogVisible = true;
    },
    //删除图片时
    handleRemoveMainImg(file, fileList) {
      if (file.name) {
        this.deleteImgFileList.push(file.name);
      }
      this.mainImgIds = fileList;
      this.noneBtnImg = fileList.length >= this.mainImgLimit;
    },
    //文件超出个数限制时
    handleExceedMainImg(files, fileList) {
      this.$message.warning(
        `当前限制选择 9 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    /**将图片上传到服务器 */
    //根据图片数量，判断上传按钮是否显示
    OnChangeMainImg(file, fileList) {
      let formData = new FormData(); //  用FormData存放上传文件
      formData.append("file", file.raw);
      let that = this;
      uploadProductImg(formData).then((response) => {
        if (this.mainImgIds === undefined) {
          this.mainImgIds = [];
        }
        that.mainImgIds.push({
          name: response.data,
          url: process.env.VUE_APP_IMG_BASE_URL + parseInt(response.data),
        });
        that.mainImageUrl.push(
          process.env.VUE_APP_IMG_BASE_URL + parseInt(response.data)
        );
      });
      this.noneBtnImg = fileList.length >= this.mainImgLimit;
    },

    /**
     * 商品导航图
     */
    //预览图片时
    handleBannerImgPreview(file) {
      this.bannerImageUrl = file.url;
      this.bannerDialogVisible = true;
    },
    //删除图片时
    handleRemoveBannerImg(file, fileList) {
      if (file.name) {
        this.deleteImgFileList.push(file.name);
      }
      this.bannerImg = fileList;
      this.noneBannerBtnImg = fileList.length > this.bannerImgLimit;
    },
    //文件超出个数限制时
    handleExceedBannerImg(files, fileList) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    /**将图片上传到服务器 */
    //根据图片数量，判断上传按钮是否显示
    OnChangeBannerImg(file, fileList) {
      let formData = new FormData(); //  用FormData存放上传文件
      formData.append("file", file.raw);
      uploadProductImg(formData).then((response) => {
        if (this.bannerImg === undefined) {
          this.bannerImg = [];
        }
        this.bannerImg.push({
          name: response.data,
          url: process.env.VUE_APP_IMG_BASE_URL + parseInt(response.data),
        });
        this.bannerImageUrl.push(
          process.env.VUE_APP_IMG_BASE_URL + parseInt(response.data)
        );
      });
      this.noneBannerBtnImg = fileList.length >= this.bannerImgLimit;
    },

    /**
     * 商品详情图
     */
    //预览图片时
    handlePreview(file) {
      this.detailImageUrl = file.url;
      this.dialogVisible = true;
    },
    //文件超出个数限制时
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 4 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    //将图片添加到图片list中，并根据图片数量，判断上传按钮是否显示
    OnChange(file, fileList) {
      let formData = new FormData(); //  用FormData存放上传文件
      formData.append("file", file.raw);
      let that = this;
      uploadProductImg(formData).then((response) => {
        if (that.detailImgIds === undefined) {
          that.detailImgIds = [];
        }
        that.detailImgIds.push({
          name: response.data,
          url: process.env.VUE_APP_IMG_BASE_URL + parseInt(response.data),
        });
        that.detailImageUrl.push(
          process.env.VUE_APP_IMG_BASE_URL + parseInt(response.data)
        );
      });
      this.noneBtn = fileList.length >= this.limit;
    },
    //删除图片时
    handleRemove(file, fileList) {
      if (file.name) {
        this.deleteImgFileList.push(file.name);
      }
      this.detailImgIds = fileList;
      this.noneBtn = fileList.length >= this.limit;
    },
    /**
     * 分类图片
     */
    //预览图片时
    handleSortImgPreview(file) {
      this.sortImageUrl = file.url;
      this.sortDialogVisible = true;
    },
    //删除图片时
    handleRemoveSortImg(file, fileList) {
      if (file.name) {
        this.deleteImgFileList.push(file.name);
      }
      this.sortImg = fileList;
      this.noneSortBtnImg = fileList.length > this.sortImgLimit;
    },
    //文件超出个数限制时
    handleExceedSortImg(files, fileList) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    /**将图片上传到服务器 */
    //根据图片数量，判断上传按钮是否显示
    OnChangeSortImg(file, fileList) {
      let formData = new FormData(); //  用FormData存放上传文件
      formData.append("file", file.raw);
      uploadProductImg(formData).then((response) => {
        if (this.sortImg === undefined) {
          this.sortImg = [];
        }
        this.sortImg.push({
          name: response.data,
          url: process.env.VUE_APP_IMG_BASE_URL + parseInt(response.data),
        });
        this.sortImageUrl.push(
          process.env.VUE_APP_IMG_BASE_URL + parseInt(response.data)
        );
      });
      this.noneSortBtnImg = fileList.length >= this.sortImgLimit;
    },
    /**
     * 图标
     */
    //预览图片时
    handleIconImgPreview(file) {
      this.iconImageUrl = file.url;
      this.iconDialogVisible = true;
    },
    //删除图片时
    handleRemoveIconImg(file, fileList) {
      if (file.name) {
        this.deleteImgFileList.push(file.name);
      }
      this.iconImg = fileList;
      this.noneIconBtnImg = fileList.length >= this.iconImgLimit;
    },
    //文件超出个数限制时
    handleExceedIconImg(files, fileList) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    /**将图片上传到服务器 */
    //根据图片数量，判断上传按钮是否显示
    OnChangeIconImg(file, fileList) {
      const isPNG = file.raw.type === "image/png";
      if (!isPNG) {
        this.$modal.msgError("上传图标只能是 PNG 格式!");
        this.iconImg = [];
        return;
      }

      let formData = new FormData(); //  用FormData存放上传文件
      formData.append("file", file.raw);
      uploadProductImg(formData).then((response) => {
        if (this.iconImg === undefined) {
          this.iconImg = [];
        }
        this.iconImg.push({
          name: response.data,
          url: process.env.VUE_APP_IMG_BASE_URL + parseInt(response.data),
        });
        this.iconImageUrl.push(
          process.env.VUE_APP_IMG_BASE_URL + parseInt(response.data)
        );
      });
      this.noneIconBtnImg = fileList.length >= this.iconImgLimit;
    },
  },
};
</script>

<style lang="scss">
.el-button [class*="el-icon-"] + span {
  margin-left: 0px;
}

.textarea-box {
  height: 96px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;

  .el-textarea__inner {
    height: 94px !important;
    border: none !important;
  }

  .el-input__count {
    position: absolute;
    bottom: 0px !important;
    right: 13px !important;
  }
}

.el-dialog {
  .el-form {
    .vue-treeselect {
      width: 200px;
    }

    .el-form-item__content {
      width: 450px;
    }

    .uoloadSty .el-upload--picture-card {
      width: 110px;
      height: 110px;
      line-height: 110px;
    }

    .disUoloadSty .el-upload--picture-card {
      display: none;
      /* 上传按钮隐藏 */
    }

    .el-upload-list--picture-card .el-upload-list__item {
      width: 110px;
      height: 110px;
    }
  }
}

.container222 {
  width: 500px;
  height: 700px;
  display: flex;
  background: rgba(198, 230, 129, 0.1);

  .name {
    position: absolute;
    top: 10px;
    left: 20px;
    bottom: 15px;
    width: 480px;
    height: 29px;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.75);
    text-align: left;
    display: flex;
  }

  .desc {
    position: absolute;
    top: 30px;
    left: 20px;
    bottom: 5px;
    width: 480px;
    height: 18px;
    font-size: 12px;
    color: rgba(128, 128, 128, 1);
    text-align: left;
    display: flex;
  }

  .firstLine {
    position: absolute;
    top: 70px;
    bottom: 25px;
    width: 500px;
    height: 168px;
    display: flex;

    .mainImg1 {
      margin-left: 20px;
      margin-right: 14px;
      width: 200px;
      height: 170px;
      display: flex;

      el-image {
        border-radius: 10px;
      }

      .image-slot {
        width: 200px;
        height: 170px;
        background: #fff;
        font-size: 20px;
        text-align: center;
        line-height: 170px;
      }
    }

    .detailImg {
      width: 252px;
      height: 170px;
      display: flex;
      flex-wrap: wrap;

      .detailImg1 {
        width: 105px;
        height: 91px;
        margin-left: 10px;
        margin-right: 10px;

        el-image {
          width: 105px;
          height: 78px;
          border-radius: 10px;
        }

        .image-slot {
          width: 105px;
          height: 91px;
          background: #fff;
          font-size: 16px;
          text-align: center;
          line-height: 91px;
        }
      }
    }
  }

  .secondLine {
    position: absolute;
    top: 261px;
    bottom: 25px;
    width: 500px;
    height: 200px;

    .bannerImg {
      margin-left: 20px;
      width: 455px;
      height: 200px;

      el-image {
        width: 100%;
        height: 100%;
        border-radius: 10px;
      }
    }

    .image-slot1 {
      width: 455px;
      height: 200px;
      background: #fff;
      font-size: 20px;
      text-align: center;
      line-height: 200px;
    }
  }

  .thirdLine {
    position: absolute;
    top: 490px;
    bottom: 25px;
    width: 498px;
    height: 210px;
    display: flex;

    .mainImg2 {
      margin-left: 20px;
      margin-right: 14px;
      width: 220px;
      height: 170px;
      display: flex;

      el-image {
        border-radius: 10px;
      }
    }

    .mainImg3 {
      margin-left: 10px;
      margin-right: 10px;
      width: 220px;
      height: 170px;
      display: flex;

      el-image {
        border-radius: 10px;
      }
    }

    .image-slot2 {
      width: 220px;
      height: 170px;
      background: #fff;
      font-size: 20px;
      text-align: center;
      line-height: 170px;
    }
  }
}

.container333 {
  width: 500px;
  height: 700px;
  background: rgba(198, 230, 129, 0.1);

  .name {
    margin-top: 10px;
    margin-left: 20px;
    width: 480px;
    height: 29px;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.75);
    text-align: left;
  }

  .desc {
    margin-left: 20px;
    width: 480px;
    height: 18px;
    font-size: 12px;
    color: rgba(128, 128, 128, 1);
    text-align: left;
  }

  .firstLine {
    margin-top: 30px;
    width: 500px;
    height: 168px;
    display: flex;
    flex-direction: row;

    .mainImg1 {
      margin-left: 20px;
      margin-right: 14px;
      width: 200px;
      height: 170px;

      el-image {
        border-radius: 10px;
      }

      .image-slot {
        width: 200px;
        height: 170px;
        background: #fff;
        font-size: 20px;
        text-align: center;
        line-height: 170px;
      }
    }

    .detailImg {
      width: 252px;
      height: 170px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      .detailImg1 {
        width: 105px;
        height: 91px;
        margin-left: 10px;
        margin-right: 10px;

        el-image {
          width: 105px;
          height: 78px;
          border-radius: 10px;
        }

        .image-slot {
          width: 105px;
          height: 91px;
          background: #fff;
          font-size: 16px;
          text-align: center;
          line-height: 91px;
        }
      }
    }
  }

  .secondLine {
    // position: relative;
    margin-top: 25px;
    bottom: 25px;
    width: 500px;
    height: 200px;

    .bannerImg {
      margin-left: 20px;
      width: 455px;
      height: 200px;

      el-image {
        width: 100%;
        height: 100%;
        border-radius: 10px;
      }
    }

    .image-slot1 {
      width: 455px;
      height: 200px;
      background: #fff;
      font-size: 20px;
      text-align: center;
      line-height: 200px;
    }
  }

  .thirdLine {
    // position: absolute;
    margin-top: 25px;
    bottom: 25px;
    width: 500px;
    height: 210px;
    display: flex;
    flex-direction: row;

    .mainImg2 {
      margin-left: 25px;
      margin-right: 14px;
      width: 208px;
      height: 170px;

      el-image {
        border-radius: 10px;
      }
    }

    .mainImg3 {
      margin-left: 10px;
      margin-right: 10px;
      width: 208px;
      height: 170px;

      el-image {
        border-radius: 10px;
      }
    }

    .image-slot2 {
      width: 220px;
      height: 170px;
      background: #fff;
      font-size: 20px;
      text-align: center;
      line-height: 170px;
    }
  }
}
</style>
